/* eslint-disable */
import react from 'react';
import echarts from 'echarts/lib/echarts';
import Chart from 'echarts-for-react/lib/core';

// 柱状图

class RightChartBar extends react.Component {
    constructor(props) {
        super(props);
        this.state = {
        }
    }
    componentDidMount() {
        //获取图表实例
        let echarts_instance = this.echarts_react.getEchartsInstance();
        //给图表注册点击事件
        echarts_instance.on('click', function (params) {
            // console.log(params.name)
            this.props.onRightChartBar(params.name)
           
        }.bind(this));
    }
    setOption = () => {
        return {
            grid: {
                top: 20,
                left: 35,
                // right: 40,
                bottom: 10,
                containLabel: true
            },
            xAxis: [
                {
                    type: 'value',
                    position: 'top',
                    name: '月度值',
                    offset: 15,
                    nameTextStyle: {
                        color: 'rgba(201, 201, 201, 1)',
                        padding: [20, 0, 10, 0],
                    },
                    nameLocation: 'start',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false,
                    },
                    axisLabel: {
                        formatter: (value) => Number(value) < 0 ? -value : value,
                        color: 'rgba(201, 201, 201, 1)'
                    },
                },
                {
                    type: 'value',
                    position: 'top',
                    offset: 15,
                    name: '累计值',
                    nameTextStyle: {
                        color: 'rgba(201, 201, 201, 1)',
                        padding: [20, 0, 10, -80],
                    },
                    nameLocation: 'end',
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: 'rgba(201, 201, 201, 1)'
                    }
                },
            ],
            yAxis: [
                {
                    type: 'category',
                    axisTick: {
                        show: false
                    },
                    data: ['柯桥区', '越城区', '上虞区', '嵊州市', '诸暨市', '新昌县'],
                    position: 'left',
                    axisLabel: {
                        color: '#fff'
                    }
                },
                {
                    type: 'category',
                    // data: ['越城区', '吴兴区', '长兴县', '德清县', '安吉县'],
                    position: 'right',
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: '#fff'
                    }
                },
            ],
            series: [
                {
                    name: '执行率(%)',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        show: true,
                        position: 'inside',
                        color: 'rgba(28, 39, 55, 1)',
                        formatter: (obj) => Number(obj.value) < 0 ? -obj.value : obj.value
                    },
                    data: [25, 22, 25, 29, 26, 21],
                    itemStyle: {
                        normal: {
                            color: 'rgba(255, 203, 73, 1)',
                            barBorderRadius: [0, 2, 2, 0]
                        }
                    },
                },
                {
                    name: '待执行数量(个)',
                    type: 'bar',
                    barWidth: 15,
                    stack: '总量',
                    label: {
                        show: true,
                        position: 'inside',
                        color: 'rgba(28, 39, 55, 1)',
                        formatter: (obj) => Number(obj.value) < 0 ? -obj.value : obj.value
                    },
                    data: [-65, -72, -75, -77, -85, -95],
                    itemStyle: {
                        normal: {
                            color: 'rgba(0, 255, 255, 1)',
                            barBorderRadius: [2, 0, 0, 2]
                        },

                    }
                }
            ]
        }
    }




    render() {
        return (
            <div className='situational-detail'>
                <Chart
                    echarts={echarts}
                    option={this.setOption()}
                    notMerge
                    lazyUpdate
                    style={{ height: 200 }}
                    ref={(e) => { this.echarts_react = e; }}
                />
            </div>
        )
    }

}
export default RightChartBar;
